<template>
  <div class="container">
    <a-card class="general-card" title="查询条件">
      <a-row>
        <a-col :flex="1">
          <a-form :model="searchModel" layout="inline" label-align="right">
            <a-row>
              <a-col flex="auto">
                <a-form-item field="id" label="id">
                  <a-input v-model="searchModel.id" placeholder="请输入id" />
                </a-form-item>
              </a-col>
              <a-col flex="auto">
                <a-form-item field="createTime" label="时间">
                  <a-input
                    v-model="searchModel.createTime"
                    placeholder="请输入时间"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" :offset="10">
          <a-space>
            <a-button type="primary" @click="search">
              <template #icon><icon-search /></template>
              查询
            </a-button>
            <a-button @click="reset">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-divider />
      <a-row style="margin-bottom: 16px">
        <a-col :span="16">
          <a-space>
            <a-button
              v-permission="authority.MALL_GOODSEVALUATION_ADD"
              type="primary"
              @click="add"
            >
              <template #icon>
                <icon-plus />
              </template>
              新建
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-table
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        :data="renderData"
        :columns="columns"
        :bordered="{ wrapper: true, cell: true }"
        @page-change="changeCurrent"
        @page-size-change="changePageSize"
      >
        <template #user="{ record }">
          <a-space direction="vertical">
            <a-avatar :size="64">
              <img :src="record.avatarUrl" />
            </a-avatar>
            <div>{{ record.nickname }}</div>
          </a-space>
        </template>
        <template #operations="{ record }">
          <a-space>
            <a-button
              v-permission="authority.MALL_GOODSEVALUATION_EDIT"
              type="text"
              size="small"
              @click="edit(record)"
            >
              <template #icon>
                <icon-edit />
              </template>
              编辑
            </a-button>
            <a-popconfirm
              :content="`此操作将永久删除该条记录, 是否继续?`"
              type="warning"
              @ok="del(record.id)"
            >
              <a-button
                v-permission="authority.MALL_GOODSEVALUATION_DEL"
                type="text"
                size="small"
                status="danger"
              >
                <template #icon>
                  <icon-delete />
                </template>
                删除
              </a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <GoodsEvaluationForm
      v-model:visible="formDialogVisible"
      :form-data="formData"
      @refresh="refresh"
    />
  </div>
</template>

<script setup lang="ts">
  import { pickBy } from 'lodash';
  import { Message } from '@arco-design/web-vue';
  import { computed, ref } from 'vue';
  import { usePagination } from 'vue-request';
  import authority from '@/utils/authority';
  import defaultPageOptions from '@/utils/pagination';
  import {
    deleteGoodsEvaluation,
    getGoodsEvaluationPage,
  } from '@/api/mall/goodsevaluation';
  import GoodsEvaluationForm from './components/goods-evaluation-form.vue';

  // 初始数据
  const generateModel = () => {
    return {
      id: '',
      createTime: '',
    };
  };

  const searchModel = ref(generateModel());

  const formData = ref({});

  const columns = [
    { title: '用户', slotName: 'user' },

    { title: '商品评分', dataIndex: 'goodsScore' },
    { title: '物流评分', dataIndex: 'logisticsScore' },
    { title: '订单ID', dataIndex: 'orderId' },
    { title: '订单详情ID', dataIndex: 'orderItemId' },
    { title: '图片', dataIndex: 'picUrls' },
    { title: '回复时间', dataIndex: 'replyTime' },
    { title: '卖家回复', dataIndex: 'sellerReply' },
    { title: '服务评分', dataIndex: 'serviceScore' },
    { title: 'sku_id', dataIndex: 'skuId' },
    { title: '规格信息', dataIndex: 'specInfo' },
    { title: '商品Id', dataIndex: 'spuId' },
    { title: '评论内容', dataIndex: 'content' },
    { title: '创建时间', dataIndex: 'createTime' },
    { title: '操作', slotName: 'operations' },
  ];

  const {
    data,
    loading,
    refresh,
    changeCurrent,
    changePageSize,
    current,
    pageSize,
    total,
  } = usePagination(
    (params) =>
      getGoodsEvaluationPage({ ...params, ...pickBy(searchModel.value) }),
    {
      ...defaultPageOptions,
    }
  );

  const renderData = computed(() => data.value?.records || []);

  // 弹出框标记
  const formDialogVisible = ref(false);

  const pagination = computed(() => ({
    current: current.value,
    pageSize: pageSize.value,
    showTotal: true,
    showPageSize: true,
    total: total.value,
  }));

  const search = () => {
    current.value = 1;
  };

  const reset = () => {
    searchModel.value = generateModel();
  };

  const add = () => {
    formDialogVisible.value = true;
    formData.value = {};
  };
  const edit = (e: any) => {
    formDialogVisible.value = true;
    formData.value = { ...e };
  };
  const del = async (id: string) => {
    await deleteGoodsEvaluation(id).then(() => {
      Message.success('删除成功');
      refresh();
    });
  };
</script>

<script lang="ts">
  export default {
    name: 'GoodsEvaluation',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0px 10px 0px 10px;
  }
</style>
